<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文档标题</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/font/css/font-awesome.css">
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/jquery-cookie/jquery.cookie.js"></script>
</head>

<body style="width: 100%;height: 100%;">
    <!-- 开始 -->
    <div class="container-fluid d-inline-flex p-0">
        <!-- 正文 -->
        <div class="container-fluid card p-0">
            <!-- top -->
            <div class="container-fluid card-header bg-dark text-white d-flex flex-row justify-content-between p-1"
                id="header">
                <a href="#" id="hideindex"></a>
                <label>后台页面</label>
                <a href="#" class="btn btn-primary d-flex flex-row" role="button" data-bs-toggle="offcanvas"
                    data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" id="userinfo">
                    <i class="fa fa-user-circle-o me-2" style="font-size: 24px; color:blanchedalmond;"></i>
                    {{ userinfo.nicename }}
                </a>
            </div>
            <!-- body -->
            <div class="card-body p-0 bg-light text-dark" style="overflow: auto;" id="main">
                <ul class="list-group" id="main-views">
                    <li class="list-group-item list-group-item-secondary" data-bs-toggle="collapse"
                        data-bs-target="#demo0">
                        <span><i class="fa fa-bank me-2" style="font-size: 24px; color:chocolate;"></i>场所模块</span>
                    </li>
                    <!-- <li class="list-group-item"> -->
                    <div id="demo0" class="collapse bg-light text-dark table-responsive" data-bs-parent="#main-views">
                        <table class="table table-striped">
                            <tbody id="places"></tbody>
                        </table>
                    </div>
                    <!-- </li> -->
                    <li class="list-group-item list-group-item-secondary" data-bs-toggle="collapse"
                        data-bs-target="#demo1"><span><i class="fa fa-address-card me-2"
                                style="font-size: 24px; color:chocolate;"></i>员工模块</span>

                    </li>
                    <!-- <li class="list-group-item"> -->
                    <div id="demo1" class="collapse bg-light text-dark" data-bs-parent="#main-views">
                        <div class="row">
                            <div class="col border py-3 d-flex justify-content-center align-items-center"
                                data-bs-toggle="modal" data-bs-target="#StaffModal">
                                员工信息</div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                员工积分</div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                员工岗位</div>
                        </div>
                        <div class="row">
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                排班表</div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                            </div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                            </div>
                        </div>
                    </div>
                    <!-- </li> -->
                    <li class="list-group-item list-group-item-secondary" data-bs-toggle="collapse"
                        data-bs-target="#demo2"><span><i class="fa fa-cubes me-2"
                                style="font-size: 24px; color:chocolate;"></i>作业项</span>

                    </li>
                    <!-- <li class="list-group-item"> -->
                    <div id="demo2" class="collapse bg-light text-dark" data-bs-parent="#main-views">
                        <div class="row">
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                作业项详单</div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                作业项提交</div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                作业项点检</div>
                        </div>
                        <div class="row">
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                呼叫详单</div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                            </div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                呼叫评价</div>

                        </div>
                        <div class="row">
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                清扫详单</div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                            </div>
                            <div class="col border py-3 d-flex justify-content-center align-items-center">
                                清扫评价</div>

                        </div>
                    </div>
                    <!-- </li> -->
                    <li class="list-group-item list-group-item-secondary" data-bs-toggle="collapse"
                        data-bs-target="#demo9"><span><i class="fa fa-cogs me-2"
                                style="font-size: 24px; color:chocolate;"></i>系统设置</span>

                    </li>
                    <div id="demo9" class="collapse bg-light text-dark" data-bs-parent="#main-views">

                    </div>
                </ul>
            </div>
            <!-- foot -->
            <div class="card-footer bg-dark text-white d-flex justify-content-center mb-0" id="footer">Copyright
                2022-2023
                渝ICP备20008438号-2
            </div>
        </div>
        <!-- 侧边栏 -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample"
            aria-labelledby="offcanvasExampleLabel">
            <div class="container-fluid bg-dark text-white" style="height:100%;">
                <!-- 头部 -->
                <div class="p-2 d-flex justify-content-around align-items-center">
                    <div class="py-3 d-flex justify-content-between align-items-center">
                        <img src="{{ userinfo.face }}" class="rounded-circle" alt="Cinque Terre"
                            style="width:64px;height:64px;">
                        <label class="ms-2">{{ userinfo.basename }} </label>
                    </div>
                    <span class="badge rounded-pill bg-warning">{{ userinfo.group }}</span>
                </div>
                <!-- 列表 -->
                <ul class="list-group">
                    <li class="list-group-item list-group-item-light d-flex align-items-center">
                        <i class="fa fa-phone me-2" style="font-size: 24px; color:chartreuse;"></i>
                        <div>
                            <label for="">Phone:</label>
                            <span class="d-block small opacity-50">{{ userinfo.phone }}</span>
                        </div>
                    </li>
                    <li class="list-group-item list-group-item-light d-flex align-items-center">
                        <i class="fa fa-envelope-o me-2" style="font-size: 24px; color:chartreuse;"></i>
                        <div><label for="">E-Mail:</label>
                            <span class="d-block small opacity-50">{{ userinfo.email }}</span>
                        </div>
                    </li>
                    <li class="list-group-item list-group-item-light d-flex align-items-center">
                        <i class="fa fa-group me-2" style="font-size: 24px; color:chartreuse;"></i>
                        <div><label for="">Role:</label>
                            <span class="d-block small opacity-50">{{ userinfo.group }}</span>
                        </div>
                    </li>
                    <li class="list-group-item list-group-item-light d-flex align-items-center">
                        <i class="fa fa-pencil-square-o me-2" style="font-size: 24px; color:chartreuse;"></i>
                        <div><label for="">Create:</label>
                            <span class="d-block small opacity-50">{{ userinfo.creatime }}</span>
                        </div>
                    </li>
                    <li class="list-group-item list-group-item-light d-flex align-items-center">
                        <i class="fa fa-history me-2" style="font-size: 24px; color:chartreuse"></i>
                        <div><label for="">Last:</label>
                            <span class="d-block small opacity-50">{{ userinfo.lastime }}</span>
                        </div>
                    </li>
                    <li class="list-group-item list-group-item-light btn rounded-0 d-flex justify-content-start"
                        id="about">
                        <i class="fa fa-info-circle me-2" style="font-size: 24px; color:chocolate"></i>
                        <div><label for="">about</label></div>
                    </li>
                    <li class="list-group-item list-group-item-light btn rounded-bottom rounded-0 d-flex justify-content-start"
                        id="logout">
                        <i class="fa fa-power-off me-2" style="font-size: 24px; color:brown"></i>
                        <div><label for="">Shutdown</label></div>
                    </li>
                </ul>
            </div>
        </div>
        {% include "upstage/nav.html" %}
    </div>

</body>
<script>
    $(document).ready(function () {
        // 初始化自定义函数
        $.fn.extend({
            loadData: function (options) {
                $(this).empty();
                var that = $(this);
                $.each(options, function (i, item) {
                    var t = item[0];
                    var v = item[1];
                    if (t == "Title") {
                        var h = '<li class="list-group-item list-group-item-light">' + t + ':<img src="' + v + '" class="img-thumbnail" alt="Images Not Find"></li>';
                    } else {
                        var h = '<li class="list-group-item list-group-item-light">' + t + ':<span class="d-block small opacity-50">' + v + '</span></li>';
                    }
                    that.append(h);
                });
            }
        });
        // 初始化高度
        var miH = $(this).innerHeight();
        $("#main").height(miH - $("#header").outerHeight() - $("#footer").outerHeight());
        $("#main").css("max-height", miH - $("#header").outerHeight() - $("#footer").outerHeight());
        $("#offcanvasExample").height(miH);
        $("#hideindex").width($("#userinfo").outerWidth());

        // 注销
        $("#logout").click(function () {
            console.log("注销");
            $.removeCookie('token');
            location.href = "/web/login/";
        });
        // 关于
        $("#about").click(function () {
            console.log("关于");
        });
        // 主目录折叠
        $(".list-group-item-primary").on("click", function (e) {
            $(".list-group-item-primary").removeClass("active");
            //$(".list-group-item-primary").find(".fa-hand-o-down").addClass("fa-hand-o-right");
            //$(".list-group-item-primary").find(".fa-hand-o-down").removeClass("fa-hand-o-down");
            $(this).toggleClass("active");
        });
        // 设置请求头
        var token = $.cookie("token");
        $.ajaxSetup({ headers: { "Authorization": "Bearer " + token } });
        // 查询门店列表
        $.ajax({
            url: "/place/battrs/",
            type: "get",
            success: function (res) {
                if (res.rescode == 200) {
                    localStorage.setItem('places', res.resmsg);
                    console.log(res.resmsg);
                    $.each(res.resmsg, function (i, item) {
                        if (item.status == 1) {
                            var status = '<span class="text-success">enable</span>';
                        } else {
                            var status = '<span class="text-danger">disable</span>';
                        }
                        var button = '<a href="#" class="btn btn-info btn-sm placeinfo" role="button" data-id="' + item.id + '" data-bs-toggle="modal" data-bs-target="#PlaceModal">查看</a>';
                        $("#places").append("<tr><td>" + item.id + "</td><td>" + item.basename + "</td><td>" + status + "</td><td>" + button + "</td></tr>");

                    });
                    // 场所详情
                    $(".placeinfo").on("click", function (e) {
                        $("#place-modal-title").html("场所信息");
                        var pid = $(this).attr("data-id");
                        $.ajax({
                            url: "/place/battrs/" + pid + "/",
                            type: "get",
                            success: function (res) {
                                var myCars = [["ID", res.resmsg.id], ["BaseName", res.resmsg.name], ["NiceName", res.resmsg.basename],
                                ["Dstrict", res.resmsg.sheng + " " + res.resmsg.shi + " " + res.resmsg.xian],
                                ["Addre", res.resmsg.addre], ["Super", res.resmsg.telephone], ["Title", res.resmsg.titles]];
                                $("#placeinfo").loadData(myCars);
                            },
                            error: function (res) {
                                console.log(res);
                            }
                        });
                    });
                }
            },
            error: function (res) { console.log(res); }
        });
        event.preventDefault();


    });
</script>

</html>